<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
	<title>疯狂的按键</title>
    <script src="./prefixfree.js"></script>
	<style>
		/*基本样式*/
		
		body,
		ul {
			margin: 0;
			padding: 0;
		}
		
		ul,
		li {
			list-style: none;
		}
		
		h1 {
			background: #eee;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			margin: 60px 0;
		}
		
		h1:nth-child(1) {
			margin-top: 20px;
		}
		
		ul {
			width: 77%;
			margin: 0 auto;
			height: 150px;
		}
		
		li {
			width: auto;
			height: auto;
			float: left;
			margin-right: 50px;
		}
		
		ul li:last-child {
			margin-right: 0;
		}
		/*设置过渡效果*/
		
		.share1 img,
		.share2 img {
			transition: all 0.8s ease-in-out;
		}
		/*设置变形*/
		
		.share1 img:hover {
			transform: rotate(360deg) scale(1.5);
		}
		
		.share2 img:hover {
			transform: rotate(-360deg) scale(0.7);
		}
	</style>
</head>

<body>
	<h1>顺时针旋转360°放大1.2倍</h1>
	<ul class="share1">
		<li>
			<a href="#"><img src="./images/share1.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share2.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share3.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share4.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share5.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share6.png" alt=""></a>
		</li>
	</ul>
	<h1>逆时针旋转360°缩小0.7倍</h1>
	<ul class="share2">
		<li>
			<a href="#"><img src="./images/share7.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share8.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share9.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share10.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share11.png" alt=""></a>
		</li>
		<li>
			<a href="#"><img src="./images/share12.png" alt=""></a>
		</li>
	</ul>
</body>

</html>